<template>
  <div>
    <ylheader :leftsvg='true' :title="title"></ylheader>
    <rotaoteend v-if="status==2"/>
    <div class="loadmore-container" ref="slotrotateWrapper" v-else>
      <div class="loadmore-ul">
        <div class="container">
          <div class="lucky-wheel">
            <div class="wheel-main a-c">
              <!--抽奖触发按钮-->
              <div class="wheel-pointer-box" @click="golottery"></div>
              <div class="wheel-bg">
                <div class="prize-list first">
                  <div class="list" :style="{transform:rotate_angle1,transition:rotate_transition1}">
                    <div class="prize-item" :style="{'background-image':`url(${item.prizePicture})`}" v-for="(item,index) in prizesList" :key="index">
                    </div>
                  </div>
                </div>
                <div class="prize-list second">
                  <div class="list" :style="{transform:rotate_angle2,transition:rotate_transition2}">
                    <div class="prize-item" :style="{'background-image':`url(${item.prizePicture})`}" v-for="(item,index) in prizesList" :key="index">
                    </div>
                  </div>
                </div>
                <div class="prize-list third">
                  <div class="list" :style="{transform:rotate_angle3,transition:rotate_transition3}">
                    <div class="prize-item" :style="{'background-image':`url(${item.prizePicture})`}" v-for="(item,index) in prizesList" :key="index">
                    </div>
                  </div>
                </div>
              </div>
              <!--绿币信息-->
              <div class="lvb-f h-c slot-prize-text">
                <div class="lvb-t a-c">
                  <img src="~img/chou-lvb.png" class="chou-icon">
                  <span>
                    <span class="lvb-num">{{coininfo.cost}}</span>绿币/次
                  </span>
                  <span>&nbsp;&nbsp;当前绿币
                    <span class="lvb-num">{{coininfo.userCoin}}</span>
                  </span>
                </div>

              </div>
            </div>
            <div class="rt-r-fa">
              <div @click="gorecode">
                <img src="~img/chou-jilu.png">
              </div>
              <div @click="gourl">
                <img src="~img/chou-guize.png">
              </div>
            </div>
            <rotateuser :headline="headline"></rotateuser>
          </div>
        </div>
        <rotatepop :prizeName="prizeinfo.prizeName" :prizeType="prizeinfo.prizeType" :ispopshow="ispopshow" @ispopshow="confirmpop"></rotatepop>
      </div>
    </div>
  </div>
</template>
<script>
import api from "src/api/index";
import rtheader from "src/components/rotate/rt-header.vue";
import rotatepop from "src/components/rotate/rotatepop.vue";
import rotateuser from "src/components/rotate/rotateuser.vue";
import rotaoteend from "src/components/rotate/rotate-end.vue";
export default {
  name: "slotrotate",
  data() {
    return {
      coininfo: {},
      prizeinfo: {},
      repeat: "",//可重复次数
      restChance: "",//剩余抽奖次数
      click_flag: true, //是否可以旋转抽奖
      headline: [],
      rotate_angle1: 'translateY(-1rem)',
      rotate_transition1: "transform 2s ease-in-out",
      rotate_angle2: 'translateY(-1rem)',
      rotate_transition2: "transform 4s ease-in-out",
      rotate_angle3: 'translateY(-1rem)',
      rotate_transition3: "transform 6s ease-in-out",
      ispopshow: false,
      prizesList: [], //奖品列表
      status:"",
      title:""
    };
  },
  components: {
    rtheader,
    rotatepop,
    rotateuser,
    rotaoteend
  },

  created() {
    this.getdraw()
  },
  methods: {
    init(){
      this.drawrecord()
          .then(data=>{
            this.initScroll();
          }).then(data => {
            this.$nextTick(() => {
                setTimeout(() => {
                  this.myscroll.refresh();
                }, 100);
              })
          });
    },
    // 获取中奖信息
    getdraw() {
      let p = new Promise((resolve, reject) => {
        api.getdraw({ drawId: this.$route.query.drawId }).then(res => {
          if (res.success) {
            this.status=res.data.status
            if(this.status==2){
              this.title="抱歉"
            }else{
              this.init()
              this.title="抽奖"
            }
            this.prizesList = res.data.prizeList;
            this.prizesList = this.prizesList.concat(this.prizesList).concat(this.prizesList).concat(this.prizesList);
            this.coininfo.cost = res.data.cost;
            this.coininfo.userCoin = res.userCoin;
            this.restChance = res.restChance;
            this.repeat = res.data.repeat;
          }
          resolve("获取抽奖信息...");
        })

      })
      return p;
    },
    startDraw(obj) {
      this.reset()
      setTimeout(() => {
        const MaxtransitionNum = 8
        this.rotate_transition1 = `all ${MaxtransitionNum - 4}s ease-in-out`
        this.rotate_transition2 = `all ${MaxtransitionNum - 2}s ease-in-out`
        this.rotate_transition3 = `all ${MaxtransitionNum}s ease-in-out`
        const len = parseInt(this.prizesList.length / 4)
        const code = obj.code;
        let num1, num2, num3;
        if (obj.code !== 0) {
          num1 = num2 = num3 = -1 * code - (len * 3)
        } else {
          num1 = -1 * code - (len * 4) + (Math.random() > 0.5 ? 1 : 2)
          num2 = num1 + (Math.random() > 0.5 ? 1 : 2)
          num3 = num1 + (Math.random() > 0.5 ? 2 : 3)
        }
        this.rotate_angle1 = `translateY(${num1}rem)`
        this.rotate_angle2 = `translateY(${num2}rem)`
        this.rotate_angle3 = `translateY(${num3}rem)`
        setTimeout(() => {
          this.click_flag = true;
          this.ispopshow = true;
        }, MaxtransitionNum * 1000);
      }, 200);
    },
    reset() {
      this.rotate_angle1 = this.rotate_angle2 = this.rotate_angle3 = 'translateY(-1rem)'
      this.rotate_transition1 = this.rotate_transition2 = this.rotate_transition3 = 'all 0s ease-in-out'
    },
    confirmpop(data) {
      this.ispopshow = !this.ispopshow;
     
      if (this.prizeinfo.prizeType == 1) {//快递实物
        this.$router.push({ path: "/address", query: { tag: 1, id: this.prizeinfo.recordId } });
      } else if (this.prizeinfo.prizeType == 2) {//红包
        this.$router.push({ path: "/submitresult", query: { tag: 1, prizeName: this.prizeinfo.prizeName } });
      } else if (this.prizeinfo.prizeType == 3) {//自取实物
        this.$router.push({ path: "/shipaddress", query: { id: this.prizeinfo.recordId, tag: 0, typeValue: this.prizeinfo.typeValue } });
      }else if(this.prizeinfo.prizeType==4){//绿币
         this.$router.push({path:"/submitresult",query:{tag:2,prizeName:this.prizeinfo.prizeName}});
      }
    },
    golottery() {
      if (this.repeat !== null && this.restChance < 1 && this.msg) {
        this.dialog(this.msg)
      }
      if (!this.click_flag) return;
      this.click_flag = false;
      if (this.coininfo.cost > this.coininfo.userCoin) {
        this.$toast("绿币不足");
      } else if (this.repeat !== null && this.restChance < 1) {
        this.$toast("对不起，您抽奖次数已达到上限啦");
      } else {
        api.golottery({ drawId: this.$route.query.drawId }).then(res => {
          if (res.success) {
            this.$util.saveFootPrint({actType:17,typeValue:this.$route.query.drawId});//用户轨迹
            this.repeat !== null && this.restChance--;
            this.coininfo.userCoin -= this.coininfo.cost;;
            this.prizeinfo = res.result;
            this.startDraw(this.prizeinfo)
          } else {
            this.msg = res.msg
            this.dialog(res.msg)
          }
        })
      }
    },
    // 中奖纪录
    drawrecord() {
      let p = new Promise((resolve, reject) => {
        api.drawrecord({ drawId: this.$route.query.drawId }).then(res => {
          if (res.success) {
            this.headline = res.data;
          }
          resolve("获取抽奖记录....");
        })
      })
        return p;
    },
    gourl() {
      this.$router.push({ path: "/activityrule", query: { drawId: this.$route.query.drawId, tag: 3 } });
    },
    gorecode() {
      this.$router.push({ path: "/exchangerecode", query: { drawId: this.$route.query.drawId, tag: 0 } });
    },
    initScroll() {
      let p = new Promise((resolve, reject) => {
        let slotrotateWrapper = this.$refs.slotrotateWrapper;
        localStorage.tempPageHeight = document.getElementsByClassName(
          "loadmore-ul"
        )[0].scrollHeight;
        let _this = this;
        this.$nextTick(() => {
          _this.myscroll = new iScroll(slotrotateWrapper, {
            preventDefault: false,
            onScrollMove: function() {
            },
            onScrollEnd: function() { },
            onScrollStart: function() {
              if (localStorage.tempPageHeight != document.getElementsByClassName("loadmore-ul")[0].scrollHeight) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName("loadmore-ul")[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll");
        });
      });
      return p;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  overflow: hidden;
}

.lucky-wheel {
  width: 100%;
  height: 12.3rem;
  background: rgb(74, 47, 127) url("https://youlingqinius.wonderlandnet.cn/chou-title.png?v=1.1") no-repeat;
  background-size: 100%;
  padding-top: 2.45rem;
}

.wheel-main {
  position: relative;
}

.wheel-pointer-box {
  position: absolute;
  top: 58%;
  left: 48%;
  z-index: 1;
  border-radius: 50%;
  transform: translate(-50%, -60%);
  width: 1.7rem;
  height: 1.7rem;
}

.wheel-bg {
  position: relative;
  width: 6.58rem;
  height: 6.58rem;
  background: url("https://youlingqinius.wonderlandnet.cn/laohuji.png") no-repeat center top;
  background-size: 100%;
  color: #fff;
  font-weight: 500;
  flex-direction: column;
  transition: transform 3s ease;
}

.wheel-bg div {
  text-align: center;
}

.prize-list {
  position: absolute;
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  .prize-item {
    width: 1rem;
    height: 1rem;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
  }
}

.first {
  top: 1.2rem;
  left: 1.08rem;
}

.second {
  top: 1.2rem;
  left: 2.7rem;
}

.third {
  top: 1.2rem;
  left: 4.35rem;
}

.prize-count {
  font-size: 0.22rem;
  color: #542c25;
}

.lvb-f {
  position: absolute;
  bottom: 2.5em;
  height: 0.6rem;
  .lvb-t {
    background: rgba(140, 44, 37, 0.4);
    padding: 0 0.25rem;
    border-radius: 15px;
    color: #ffffff;
    height: 0.6rem;
    line-height: 0.6rem;
    .chou-icon {
      width: 0.38rem;
      height: 0.38rem;
    }
  }
  .lvb-num {
    font-size: 0.26rem;
    color: #fdd83f;
  }
}

.chou-icon {
  width: 0.52rem;
  height: 0.52rem;
  margin-right: 0.1rem;
  margin-bottom: 0.02rem;
}

.slot-prize-text {
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
}
</style>


